<script setup>
import {computed, inject, onMounted, reactive, ref} from "vue";
import {useMessage} from "jiuqi-ui";
//================================================【公用相关】============================================================
//提示信息组件
const message = useMessage()
//发送请求组件
const context = inject('context')
//加载框显示与隐藏
const isLoading = ref(false)
//当前引用信息是否为查询后的结果
const isQueryed = ref(false)
//================================================【组件通信】============================================================
//控制  标签引用展示模态框 是否 展示与隐藏
const labelReferenceVisible = inject('labelReferenceVisible')
//当前标签ID
const curLabelItem = inject('curLabelItem')
//================================================【组件属性】============================================================
const labelReferenceTitle = computed(()=>{
    return `查看【${curLabelItem.title}】标签引用`
})
//================================================【普通方法】============================================================
//==================================================================【列表相关】
//引用信息
const referInfoArr = reactive([])
//标签列表 表头信息
const columns = ref([
    { title: '序号', resizable: true, align: 'center', key: 'process_order',width: 60},
    { title: '引用模块', resizable: true, align: 'left', key: 'modelPath',poptip: true },
    { title: '引用内容', resizable: true, align: 'left', key: 'desc',poptip: true  },
])
//==================================================================【模态框相关】
const isModelFull = ref(false)
function cancel() {
    labelReferenceVisible.value = false
}
function confirm() {
    labelReferenceVisible.value = false
}
//================================================【生命周期】============================================================
onMounted(() => {
    //显示加载框
    isLoading.value = true
    //获取标签引用描述
    context.getPlugin('http').get(`labelmanager/label/dependent/${curLabelItem.name}`).then(({data}) => {
        referInfoArr.splice(0, referInfoArr.length)
        let i = 1
        data.map(curItem1 => {
            curItem1.desc.map(curItem2 =>{
                let oneColumnItem = {
                    'process_order': i++,
                    'modelPath' : curItem1.modelPath,
                    'desc': curItem2
                }
                referInfoArr.push(oneColumnItem)
            })
        })
        //隐藏加载框
        isLoading.value = false
        //当前引用信息数组为查询后的结果
        isQueryed.value = true
    }).catch(()=>{
        message.error('获取引用信息失败')
    })
})
</script>

<template>
    <j-modal
            v-model="labelReferenceVisible"
            :title="labelReferenceTitle"
            :mask-closable="false"
            :mask="false"
            v-model:fullscreen="isModelFull"
    >
        <j-modal-content class="modalContent">
            <j-spin :show="isLoading" :wrapper-style="{ height: '100%'}" :style="{ height: '100%' }">
                <div v-if="isQueryed && referInfoArr.length > 0">
                    <j-table
                        class="refer-table-container"
                        border
                        :highlight="true"
                        :columns="columns"
                        :data="referInfoArr"
                        height="100%">
                    </j-table>
                </div>
                <div v-if="isQueryed && referInfoArr.length === 0" class="nonRefer">
                    暂无引用
                </div>
            </j-spin>
        </j-modal-content>
        <template #footer>
            <j-space style="justify-content: flex-end">
                <j-button @click="cancel">取消</j-button>
                <j-button type="primary" @click="confirm">确定</j-button>
            </j-space>
        </template>
    </j-modal>
</template>

<style scoped>
.modalContent{
    height: 286px !important;
    padding: 16px 24px 16px 10px;
}
.refer-table-container{
    height: 100%;
    min-width: 639px;
    overflow: auto;
}
.nonRefer{
    text-align: center;
    height: 253px;
    line-height: 253px;
}
</style>
